<template>
  <div class="login-container">
    <div class="shapes-container">
      <div v-for="index in 5" :key="`circle-${index}`" class="circle"></div>
      <div v-for="index in 5" :key="`square-${index}`" class="square"></div>
    </div>
    <el-form
        ref="formRef"
        class="login-form"
        auto-complete="on"
        :rules="loginRules"
        :model="loginForm"
    >
      <div class="title-container">
        <h3 class="title">项目任务管理系统</h3>
      </div>

      <el-form-item prop="username">
        <el-input
            v-model="loginForm.username"
            placeholder="请输入账号"
            type="text"
        >
        <template #prefix>
          <el-icon>
            <User />
          </el-icon>
        </template>
        </el-input>
      </el-form-item>

      <el-form-item prop="password">
        <el-input
            v-model="loginForm.password"
            type="password"
            placeholder="请输入密码"
        >
          <template #prefix>
            <el-icon>
              <Lock />
            </el-icon>
          </template>
        </el-input>
      </el-form-item>

      <el-form-item prop="roleName">
        <el-radio-group v-model="loginForm.roleName">
          <el-radio label="user">用户</el-radio>
          <el-radio label="admin">管理员</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-button
          type="primary"
          style="width:100%;margin-bottom:30px;"
          @click.prevent="handleLogin"
      >登录</el-button>

    </el-form>
  </div>
</template>

<script setup>
import {ref, reactive, onMounted} from 'vue'
import {useStore} from 'vuex'
import {useRouter} from "vue-router"

const store = useStore()
const router = useRouter()
const loginRules = ref({
  username: [
    {required: true, message: '请输入账号', trigger: 'blur'}
  ],
  password: [
    {required: true, message: '请输入密码', trigger: 'blur'}
  ],
  roleName: [
    {required: true, message: '请选择您的角色', trigger: 'blur'}
  ]
})

const loginForm = reactive({
  username: '',
  password: '',
  roleName: ''
})
const formRef = ref(null)
const handleLogin = () => {
  formRef.value.validate(async (valid) => {
    if (valid) {
      if(loginForm.roleName === 'user'){
        store.dispatch('userLogin', loginForm).then((res) => {
          router.push('/')
        })
      }else{
        store.dispatch('login', loginForm).then((res) => {
          router.push('/')
        })
      }
    }
  })
}

</script>

<style lang="scss">
$bg-gradient-start: #ff1e1e;
$bg-gradient-end: #74d5ff;
$light_gray: #fff;
$cursor: #fff;

@keyframes gradientBG {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.login-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(270deg, $bg-gradient-start, $bg-gradient-end);
  background-size: 200% 200%;
  animation: gradientBG 15s ease infinite;
  overflow: hidden;

  @keyframes moveShapes {
    0%, 100% {
      transform: translate3d(0, -50px, 0);
    }
    50% {
      transform: translate3d(-100%, 100%, 0);
    }
  }

  .shapes-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    z-index: 1;
  }

  .shape {
    position: absolute;
    background: rgba(255, 255, 255, 0.5);
    animation: moveShapes 3s ease-in-out infinite;
  }

  .circle {
    @extend .shape;
    border-radius: 50%;
  }

  .square {
    @extend .shape;
    border-radius: 5px;
    animation: moveShapes 3s ease-in-out infinite;
  }

  .circle:nth-child(1) {
    width: 20px;
    height: 20px;
    top: 15%;
    left: 10%;
    animation-delay: 0s;
  }

  .circle:nth-child(2) {
    width: 30px;
    height: 30px;
    top: 40%;
    left: 20%;
    animation-delay: 1s;
  }

  .circle:nth-child(3) {
    width: 40px;
    height: 40px;
    top: 30%;
    left: 70%;
    animation-delay: 2s;
  }

  .circle:nth-child(4) {
    width: 50px;
    height: 50px;
    top: 20%;
    left: 40%;
    animation-delay: 3s;
  }

  .circle:nth-child(5) {
    width: 60px;
    height: 60px;
    top: 80%;
    left: 90%;
    animation-delay: 4s;
  }

  .square:nth-child(6) {
    width: 20px;
    height: 20px;
    top: 5%;
    left: 50%;
    animation-delay: 0.5s;
  }

  .square:nth-child(7) {
    width: 40px;
    height: 40px;
    top: 25%;
    left: 10%;
    animation-delay: 1.5s;
  }

  .square:nth-child(8) {
    width: 30px;
    height: 30px;
    top: 60%;
    left: 80%;
    animation-delay: 2.5s;
  }

  .square:nth-child(9) {
    width: 50px;
    height: 50px;
    top: 70%;
    left: 30%;
    animation-delay: 3.5s;
  }

  .square:nth-child(10) {
    width: 60px;
    height: 60px;
    top: 90%;
    left: 60%;
    animation-delay: 4.5s;
  }


  .login-form {
    width: 520px;
    max-width: 100%;
    padding: 60px 35px 0;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 10px;
    background: rgba($light_gray, 0.8);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    animation: fadeIn 1s;
    z-index: 2;

    @keyframes fadeIn {
      0% {
        opacity: 0;
        transform: translateY(-20px);
      }
      100% {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .title-container {
      width: 100%;
      text-align: center;
      margin-bottom: 24px;
    }

    .el-form-item {
      width: 100%;
      margin-bottom: 24px;
    }

    .el-button {
      width: 100%;
      transition: all 0.3s;
      background: linear-gradient(45deg, $bg-gradient-start, $bg-gradient-end);
      color: $light_gray;
      border: none;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
      position: relative;
      overflow: hidden;

      &:hover {
        background-position: right center;
        color: darken($light_gray, 10%);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
      }

      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 200%;
        height: 100%;
        background: rgba($light_gray, 0.2);
        transform: skewX(-45deg);
        transition: all 0.5s;
      }

      &:hover::before {
        left: 100%;
      }
    }
  }
}

</style>